{% extends "base.html" %}
{% block content %}
<div class="container-fluid" style="background-color:#333333;" >
	<div class="row">
	<!--	<div class="col-sm-3 col-md-2 sidebar"></div> -->
		<div class="col-md-8 col-md-offset-2">
			{% for message in get_flashed_messages() %}
			<div class="alert alert-warning">
				<button type="button" class="close" data-dismiss="alert">&times;</button>
				{{ message }}	
			</div>
			{% endfor %}	
			<div class="row" style="background-color:#FFFFFF;margin-top:10px;">
				<div style="background-color:#F2F2D2;height:50px;line-height:50px;font-size:20px;margin-top:10px;">&nbsp历史新增申请数据
					<button type="button" class="btn btn-success" style="float:right;margin-top:8px;margin-right:5px;" onclick="window.open('{{ url_for('track.buy_list') }}')">
						查看待跟进申请
					</button>
				</div>
				<div style="margin-top:20px;">
					<div class="btn-group" data-toggle="buttons" style="margin-left:5px;">
						<label class="btn btn-default active" onclick="set_attr('u=0', 'bs')">
							<input type="radio" > 整体
						</label>
						<label class="btn btn-default" onclick="set_attr('u=2', 'bs')">
							<input type="radio" > 个人
						</label>
						<label class="btn btn-default" onclick="set_attr('u=1', 'bs')">
							<input type="radio" > 商家
						</label>
					</div>	
					<div class="btn-group" data-toggle="buttons" style="margin-left:10px;">
						<label class="btn btn-default" onclick="set_attr('b=buy', 'bs')">
							<input type="radio"> 买车
						</label>
						<label class="btn btn-default active" onclick="set_attr('b=rent', 'bs')">
							<input type="radio" > 租赁
						</label>
						<label class="btn btn-default" onclick="set_attr('b=finance', 'bs')">
							<input type="radio" > 金融
						</label>
						<label class="btn btn-default" onclick="set_attr('b=service', 'bs')">
							<input type="radio" > 服务
						</label>
					</div>	
					<div class="btn-group" style="float:right;margin-right:5px;" data-toggle="buttons">
						<label class="btn btn-default active" onclick="set_attr('d=7', 'bs')">
							<input type="radio" > 一周
						</label>
						<label class="btn btn-default" onclick="set_attr('d=30', 'bs')">
							<input type="radio" > 一月
						</label>
						<label class="btn btn-default" onclick="set_attr('d=365', 'bs')">
							<input type="radio" > 一年
						</label>
					</div>	
				</div>
				<div id="bs" style="margin-top:20px;height:400px;"></div>
			</div>
			<div class="row" style="background-color:#FFFFFF;margin-top:20px;">
				<div style="background-color:#F2F2D2;height:50px;line-height:50px;font-size:20px;margin-top:10px;margin-right:5px;">&nbsp历史新增车源数据
					<button type="button" class="btn btn-success" style="float:right;margin-top:8px;" onclick="window.open('{{ url_for('car.review_list') }}')"> 
						查看待审车源
					</button>
				</div>
				<div style="margin-top:20px;">
					<div class="btn-group" data-toggle="buttons" style="margin-left:5px;">
						<label class="btn btn-default active" onclick="set_attr('u=0', 'car')">
							<input type="radio" > 整体
						</label>
						<label class="btn btn-default" onclick="set_attr('u=2', 'car')">
							<input type="radio" > 个人
						</label>
						<label class="btn btn-default" onclick="set_attr('u=1', 'car')">
							<input type="radio" > 商家
						</label>
					</div>	
					<div class="btn-group" style="float:right;margin-right:5px;" data-toggle="buttons">
						<label class="btn btn-default active" onclick="set_attr('d=7', 'car')">
							<input type="radio" > 一周
						</label>
						<label class="btn btn-default" onclick="set_attr('d=30', 'car')">
							<input type="radio" > 一月
						</label>
						<label class="btn btn-default" onclick="set_attr('d=365', 'car')">
							<input type="radio" > 一年
						</label>
					</div>	
				</div>
				<div id="car" style="margin-top:20px;height:400px;"></div>
			</div>
			<div class="row" style="background-color:#FFFFFF;margin-top:20px">
				<div style="background-color:#F2F2D2;height:50px;line-height:50px;font-size:20px;margin-top:10px;">&nbsp历史新增账户数据
					<button type="button" class="btn btn-success" style="float:right;margin-top:8px;margin-right:5px;" 
								onclick="window.open('{{ url_for('outside.company_list') }}')">
						查看待审账户
					</button>
				</div>
				<div style="margin-top:20px;">
					<div class="btn-group" data-toggle="buttons" style="margin-left:5px;">
						<label class="btn btn-default active" onclick="set_attr('u=0', 'account')">
							<input type="radio" > 整体
						</label>
						<label class="btn btn-default" onclick="set_attr('u=2', 'account')">
							<input type="radio" > 个人
						</label>
						<label class="btn btn-default" onclick="set_attr('u=1', 'account')">
							<input type="radio" > 商家
						</label>
					</div>	
					<div class="btn-group" style="float:right;margin-right:5px;" data-toggle="buttons">
						<label class="btn btn-default active" onclick="set_attr('d=7', 'account')">
							<input type="radio" > 一周
						</label>
						<label class="btn btn-default" onclick="set_attr('d=30', 'account')">
							<input type="radio" > 一月
						</label>
						<label class="btn btn-default" onclick="set_attr('d=365', 'account')">
							<input type="radio" > 一年
						</label>
					</div>	
				</div>
				<div id="account" style="margin-top:20px;height:400px;"></div>
			</div>
			<div class="row" style="background-color:#FFFFFF;margin-top:20px;">
				<div style="background-color:#F2F2D2;height:50px;line-height:50px;font-size:20px;margin-top:10px;">&nbsp历史新增贷款数据
					<button type="button" class="btn btn-success" style="float:right;margin-top:8px;margin-right:5px;" data-target="#AddModal" data-toggle="modal">
						查看待审流程
					</button>
				</div>
				<div style="margin-top:20px;">
					<div class="btn-group" data-toggle="buttons" style="margin-left:5px">
						<label class="btn btn-default active" onclick="set_attr('u=0', 'loan')">
							<input type="radio" > 整体
						</label>
						<label class="btn btn-default" onclick="set_attr('u=2', 'loan')">
							<input type="radio" > 个人
						</label>
						<label class="btn btn-default" onclick="set_attr('u=1', 'loan')">
							<input type="radio" > 商家
						</label>
					</div>	
					<div class="btn-group" style="float:right;margin-right:5px;" data-toggle="buttons">
						<label class="btn btn-default active" onclick="set_attr('d=7', 'loan')">
							<input type="radio" > 一周
						</label>
						<label class="btn btn-default" onclick="set_attr('d=30', 'loan')">
							<input type="radio" > 一月
						</label>
						<label class="btn btn-default" onclick="set_attr('d=365', 'loan')">
							<input type="radio" > 一年
						</label>
					</div>	
				</div>
				<div id="loan" style="margin-top:20px;height:400px;"></div>
			</div>
			<div class="row" style="background-color:#FFFFFF;margin-top:20px;margin-bottom:20px;">
				<div class="col-md-6" style="margin-top:10px;">
					<div class="panel panel-warning">
						<div class="panel-heading" style="font-size:20px;">登录信息</div>
						<div class="panel-body" style="font-size:15px;">
							<div>您好，{{ session.get('name') }}({{ session.get('staff_number') }})</div>
							<div>部门：{{ session.get('department') }}</div>
							<div>上次登录ip：{{ session.get('last_login_ip') }}</div>
							<div>上次登录时间：{{ session.get('last_login_time') }}</div>
							<div>上次登录地点：{{ session.get('last_login_area') }}</div>

						</div>
					</div>
				</div>
				<div class="col-md-6" style="margin-top:10px;">
					<div class="panel panel-warning">
						<div class="panel-heading" style="font-size:20px;">系统信息</div>
						<div class="panel-body" style="font-size:15px;">
							<div>系统：Ubuntu 16.04</div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</div>
</div>
{% endblock %}
{% block scripts %}
{{ super() }}
<script src={{ url_for('static', filename='js/echarts.js') }}></script>
<script type="text/javascript">

var bsChart = echarts.init(document.getElementById('bs'));
var carChart = echarts.init(document.getElementById('car'));
var accountChart = echarts.init(document.getElementById('account'));
var loanChart = echarts.init(document.getElementById('loan'));

// 指定图表的配置项和数据
var option = {
	tooltip: {
		trigger: 'axis'
	},
	legend: {
		data:['PC端趋势','移动端趋势','整体趋势']
	},
	grid: {
		left: '3%',
		right: '4%',
		bottom: '3%',
		containLabel: true
	},
};

bsChart.setOption(option);
carChart.setOption(option);
accountChart.setOption(option);
loanChart.setOption(option);

</script>
<script>
var bs_type = "rent";
var user_type = '0';
var date = '7';
var last_click = 'bs';

var set_attr = function(attr, chart){
	tp = attr.split('=')[0];
	value = attr.split('=')[1];
	if(tp==='u'){
		if(user_type===value && last_click===chart){
			return;
		}
		user_type = value;
		
	}
	else if(tp==='b'){
		if(bs_type===value && last_click===chart){
			return;
		}
		bs_type = value;
	}
	else if(tp==='d'){
		if(date===value && last_click===chart){
			return;
		}
		date = value;
	}
	else{
		return;
	}
	if(chart==='bs'){
		get_bs_data();
	}
	else{
		get_other_data(chart);
	}
	last_click = chart;
	return;
}

var get_bs_data = function(){

	$.ajax({
		url: "/home/get_bs/",
		type: "GET",
		data: {'user_type': user_type, 'bs_type': bs_type, 'date': date},
		dataType:"text",
		success: function(data) {
			json = eval("("+data+")");
			state = json.state;
			if(state===0){
				SetOption('bs', json);
			}
		},
	});
}

var get_other_data = function(chart){

	$.ajax({
		url: "/home/get_other/",
		type: "GET",
		data: {'user_type': user_type, 'chart': chart, 'date': date},
		dataType:"text",
		success: function(data) {
			json = eval("("+data+")");
			state = json.state;
			if(state===0){
				SetOption(chart, json);
			}
		},
	});
}

var SetOption = function(chart, json){
	option = {

		xAxis : [{
			type : 'category',
			boundaryGap : false,
			data : json.data.dates,
			}],
		yAxis: [{
			type: 'value',
			}],
		series : [{
			name: '移动端趋势',
			type: 'line',
			stack: '总量',
			label: {
				normal: {
					show: true,
					position: 'top'
				}
			},
			areaStyle: {normal: {}},
			data: json.data.mobile_count,
			}, {
			name: 'PC端趋势',
			type: 'line',
			stack: '总量',
			label: {
				normal: {
					show: true,
					position: 'top'
				}
			},
			areaStyle: {normal: {}},
			data: json.data.pc_count,
			},{
			name: '整体趋势',
			type: 'line',
			stack: '总量',
			label: {
				normal: {
					show: true,
					position: 'top'
				}
			},
			areaStyle: {normal: {}},
			data: json.data.total,
			},],
	};
	if(chart==='bs'){
		bsChart.setOption(option);
	}
	else if(chart==='car'){
		carChart.setOption(option);
	}
	else if(chart==='account'){
		accountChart.setOption(option);
	}
	else if(chart==='loan'){
		loanChart.setOption(option);
	}
}
</script>
<script>
var Init = function(){
	get_bs_data();
	get_other_data('car');
	get_other_data('account');
	get_other_data('loan');
}
window.onload = Init;
</script>
{% endblock %}
